<template>
  <!-- 共享设置 -->
  <el-dialog title="共享设置" :visible.sync="dialogVisible" @close="close" append-to-body :close-on-click-modal="false" width="900px">
    <div class="new_form_box" v-loading="loading">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="90px" class="demo-ruleForm">
        <div class="yys-item" v-for="(yys,index) in form.list" :key="yys.carrierId">
          <div style="margin-bottom: 5px;">
            <formSubTitVue :title="yys.carrierName"></formSubTitVue>
          </div>
          <el-form-item label="服务费类型" :prop="'list.' + index +'.fuwufeiType'" >
            <el-radio-group v-model="yys.fuwufeiType" @change="fuwufeiTypeChange">
              <el-radio :label="1">自己承担</el-radio>
              <el-radio :label="2">用户承担</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单价" label-width="60px" :prop="'list.' + index +'.monthPrice'" >
            <el-input style="width:100px" :controls="false" v-model="yys.monthPrice" placeholder="请输入单价"></el-input>
            元/月
          </el-form-item>
          <el-form-item label="起租时长" label-width="80px" :prop="'list.' + index +'.minMonth'" >
            <el-input style="width:100px" :controls="false" v-model="yys.minMonth" placeholder="不填默认1月"></el-input>
            月
          </el-form-item>
        </div>

      </el-form>
    </div>
    <div class="tip">
      <p>服务费：{{fuwufeidanjia}}元/卡/月。</p>
      <!-- <p>· 如果发布到共享市场，用户使用时按照服务费类型进行服务费收取。</p>
      <p>· 如果指定用户共享，由管理方承担服务费。</p>
      <p>· 续费时，谁续费谁承担服务费。</p> -->
    </div>

    <div class="center">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm('form')" v-loading="loading">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import phoneApi from "@/api/phoneManage";
import {
  addtenantPushSettings,
  getTenantPushSettingsByTenantId,
  delTenantPushSettings,
} from "@/api/system/shopManage";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        list: [],
      },
      rules: {
        fuwufeiType: [{ required: true, message: "请选择", trigger: "change" }],
        monthPrice: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      fuwufeidanjia:1
    };
  },
  created() {},
  computed: {
    carrierTypes() {
      return this.$store.getters.gameYunyingshangList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  watch: {
    carrierTypes: {
      handler: function (val, oldVal) {
        if (val && val.length) {
          this.form.list = val.map((item) => {
            return {
              carrierId: item.id || "", // 如果有初始值则使用，否则为空
              carrierName: item.name || "",
              fuwufeiType: "",
              monthPrice: "",
              minMonth: "",
            };
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 打开弹窗
    open() {
      this.dialogVisible = true;
      // this.initForm()
      this.handleUpdate();
      this.getFuwufeidanjia()
      // this.getList();
    },
    // initForm(){
    //   if(this.form.list&&this.form.list.length){
    //     this.form.list.forEach(r=>{

    //     })
    // },
    /** 查询详情进行回显 */
    handleUpdate() {
      getTenantPushSettingsByTenantId({
        tenantId: this.shopInfo.tenantId,
        type: 9,
      }).then((res) => {
        if (res.data && res.data.settingsJson) {
          const resobj = JSON.parse(res.data.settingsJson);
          if (this.form.list && this.form.list.length) {
            this.form.list.forEach((r, i) => {
              if (resobj[r.carrierId]) {
                this.form.list[i].monthPrice = resobj[r.carrierId].monthPrice;
                this.form.list[i].fuwufeiType = resobj[r.carrierId].fuwufeiType;
                this.form.list[i].minMonth = resobj[r.carrierId].minMonth||'';
              }
            });
            this.$forceUpdate();
          }
        }
      });
    },
    // 查询卡位服务费单价
    async getFuwufeidanjia(){
      const res = await this.getDicts("kaweifuwufei");
      if (res.data && res.data.length) {
        const obj = this.arrayToObject(res.data, "dictLabel");
        if(obj.kaweifuwufei&&obj.kaweifuwufei.dictValue){
          this.fuwufeidanjia = Number(obj.kaweifuwufei.dictValue)
        }
      }
    },
    del() {
      delTenantPushSettings(this.form.id).then((res) => {
        this.$message.success(res.msg);
        this.dialogVisible = false;
      });
    },
    // 选号类型改变
    fuwufeiTypeChange() {},

    submitForm(formName) {
      this.$refs["" + formName].validate((valid) => {
        if (valid) {
          // 构造提交数据
          const submitData = {};
          let err = false
          this.form.list.forEach((r) => {
            submitData[r.carrierId] = { ...r };
            if((r.fuwufeiType&&!r.monthPrice)||(!r.fuwufeiType&&r.monthPrice)){
              // 服务费类型和单价只填一个的时候  不能提交
              err = true
            }
          });
          if(err){
            return this.$message.error('服务费类型和单价必须同时填写！')
          }
          addtenantPushSettings({
            tenantId: this.shopInfo.tenantId,
            tenantName: this.shopInfo.tenantName,
            settingsJson: JSON.stringify(submitData),
            type: 9,
            testId: "",
          }).then((res) => {
            this.$message.success(res.msg);
            this.$emit('saved')
            this.dialogVisible = false;
          });
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    close() {
      this.$refs.form.resetFields();
      if (this.form.list && this.form.list.length) {
        this.form.list.forEach((r, i) => {
          this.form.list[i].fuwufeiType = "";
          this.form.list[i].monthPrice = "";
        });
        this.$forceUpdate();
      }
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: #999;
  padding-bottom: 60px;
}
.center{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background: #fff;
}
</style>

